<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 离线 Google 字体: Source Sans Pro -->
    <link rel="stylesheet" th:href="@{/AdminLTE/css/google.css?family=Source+Sans+Pro:300,400,400i,700&display=fallback}">
    <!-- Font Awesome -->
    <link rel="stylesheet" th:href="@{/plugins/fontawesome-free/css/all.min.css}">
    <!-- 主题样式 -->
    <link rel="stylesheet" th:href="@{/AdminLTE/css/adminlte.min.css}">
</head>
<body>
<div class="container" style="margin-top: 100px">
    <div class="input-group input-group-lg" style="width: 70%">
        <input type="text" class="form-control" disabled th:value="${#session.getAttribute('login_user').username}">
        <span class="input-group-append">
            <button type="button" class="btn btn-info btn-flat send-email">发送验证码</button>
        </span>
    </div>
    <div class="input-group input-group-lg" style="width: 70%">
        <input type="text" class="form-control" name="code" id="code" placeholder="输入验证码">
    </div>
    <div class="input-group input-group-lg" style="width: 70%">
        <button class="btn btn-primary btn-submit">提交</button>
    </div>
</div>

<!-- jQuery -->
<script th:src="@{/plugins/jquery/jquery.min.js}"></script>
<script>
    $(".send-email").click(send);
    $(".btn-submit").click(() =>{
        $.ajax({
            type: 'post',
            async: false,
            url: '',
            data:{
                code: $("#code").val()
            },
            success: (result) => {
                console.log(result);
            }
        });
    });

    function send(){
        $(".send-email").off('click'); // 按钮不能用
        // $(".send-email").attr("disabled", true);
        //
        // let timer = 60;
        // let index = setInterval(function(){
        //     $(".send-email").text(timer -- + "S");
        //     if (timer <= 0){
        //         clearInterval(index);
        //         $(".send-email").click(send);
        //         $(".send-email").attr("disabled", false);
        //         $(".send-email").text("发送验证码");
        //     }
        // }, 1000);

        $.ajax({
            type: "get",
            url: "/send-email",
            success: function (result){
                console.log(result);
                alert("发送成功");
            }
        })
    }
</script>
</body>
</html>